let markNode = document.querySelector(".mark")
let ul = document.querySelector("ul")
let count = 0;

let URL = "https://jsonplaceholder.typicode.com/posts"
//获取接口里面的信息，new IntersectionObserver 创建观察对象，观察目标元素与可视区域的交叉区域
let observer = new IntersectionObserver(async entries => {
    let result = await ajax({
        url: URL,
        method: 'GET'
    })
//用mark装载一个entries[0]方法 entries方法返回对象自身可列举属性的键值对数组，不包含原型上的属性
    let mark = entries[0]
//判断变量mark文本内容是否进入可视区域
    if (mark.isIntersecting) {
        //splice(0, 10)删除数组中的0到10项，并返回被删除的数组
        let data = result.splice(0, 5);
        //遍历删除后返回的新数组然后渲染到页面上
        data.forEach(async item => {
            ul.innerHTML += `<li>
        		<h2>${item.title}</h2>
        		<p>${item.body}</p>
    		</li>`
        })
    }
//判断下拉加载大于或等于10就直接终止观察
    if (count >= 10) {
        alert("已经加载完了")
        // 终止观察者观察这个对象
        observer.unobserve(markNode)
    }
    count++;
})
//开始观察监听元素
observer.observe(markNode)